<template>
    <div>
        <h1>需求：水温达到50℃，或水位达到20cm，则联系服务器</h1>

        <h2 id="demo">水温：{{ temp }}</h2>

        <h2>水位：{{ height }}</h2>

        <button @click="changePrice">水温+1</button>

        <button @click="changeSum">水位+10</button>

    </div>
</template>

<script setup lang="ts" name='WatchEffect'>
import { ref, watch, watchEffect } from 'vue'
// 数据
let temp = ref(0)
let height = ref(0)

// 方法
function changePrice() {
    temp.value += 10
}
function changeSum() {
    height.value += 1
}

// watch([temp, height], ([newTemp, newHeight]) => {
//     // 室温达到50℃，或水位达到20cm，立刻联系服务器
//     if (newTemp >= 50 || newHeight >= 20) {
//         console.log('联系服务器')
//     }
// })


let stopWtach = watchEffect(() => {
    // 室温达到50℃，或水位达到20cm，立刻联系服务器
    if (temp.value >= 50 || height.value >= 20) {
        console.log('联系管理员')
        stopWtach()
    }
})


</script>

<style scoped></style>